import Vue from 'vue';
import VueRouter from 'vue-router';

import store from '@/store/index';
Vue.use(VueRouter);

/**
 * 1. 定义 (路由) 组件。
 * 2. meta 属性，用来设置路由的元信息 如(页面标题)
 * 3. 在路由中定义组件，组件名称为首字母大写
 * 4. title 属性，用来设置页面标题
 * 5. keep-alive 属性，用来缓存组件
 * 6. redirect 属性，用来重定向
 * 7. children 属性，用来设置子路由
 * 8. name 属性，用来设置路由名称
 * 9. path 属性，用来设置路由路径
 * 10. component 属性，用来设置路由组件
 * 11. alias 属性，用来设置路由别名
 * 12. beforeEnter 属性，用来设置路由进入前的钩子函数
 * 13. isLogin 属性 用于判断用户是否登录
 * 14. props 属性，用来设置路由组件的属性
 */
const router = new VueRouter({
	mode: 'hash',
	routes: [
		{
			name: '',
			path: '/',
			component: () => import('@/layouts/GlobalIndex.vue'),
			children: [
				{
					path: '/',
					component: () => import('@/pages/FoodsIndex/FoodsIndex.vue'),
					children: [
						{
							path: '/',
							component: () => import('@/pages/FoodsIndex/components/FoodsIndex/FoodsIndex.vue'),
							meta: {
								title: '首页',
								keepAlive: true,
								isLogin: false,
							},
						},
						{
							name: 'FoodsTopList',
							path: '/FoodsTopList',
							component: () => import('@/pages/FoodsIndex/components/FoodsTopList/FoodsTopListIndex.vue'),
							meta: {
								title: '菜谱排行榜',
								keepAlive: true,
								isLogin: false,
							},
						},
						{
							name: 'UserShare',
							path: '/UserShare',
							component: () => import('@/pages/UserShare/pages/UserShareList.vue'),
							meta: {
								title: '用户打卡圈',
								keepAlive: true,
								isLogin: false,
							},
						},
						{
							name: 'FoodClassificationList',
							path: '/FoodClassificationList/:title',
							component: () => import('@/pages/FoodsClassificationList/FoodClassificationListIndex.vue'),
							props: true,
							meta: {
								title: '菜品大全',
								keepAlive: false,
								isLogin: false,
							},
							beforeEnter(to, from, next) {
								next((vm) => {
									vm.getMenuDetails();
								});
							},
						},
					],
				},
			],
		},
		{
			name: 'FoodClassificationLists',
			path: '/FoodClassificationLists/:title',
			component: () => import('@/pages/FoodsClassificationList/FoodClassificationListIndex.vue'),
			props: true,
			meta: {
				title: '搜索结果',
				keepAlive: false,
				isLogin: false,
			},
		},
		{
			name: 'UserLogin',
			path: '/UserLogin',
			component: () => import('@/pages/UserLogin/UserLoginIndex.vue'),
			meta: {
				title: '账号登录',
				keepAlive: false,
				isLogin: false,
			},
		},
		{
			name: 'FoodDetailInfo',
			path: '/FoodDetailInfo',
			component: () => import('@/pages/FoodDetailInfo/FoodDetailInfoIndex.vue'),
			meta: {
				title: '菜品详情',
				keepAlive: false,
				isLogin: false,
			},
		},
		{
			name: 'ConfirmOrder',
			path: '/ConfirmOrder',
			component: () => import('@/pages/ConfirmOrder/ConfirmOrderIndex.vue'),
			meta: {
				title: '购买食材',
				keepAlive: false,
				isLogin: true,
			},
		},
		{
			name: 'FoodsSearch',
			path: '/FoodsSearch',
			component: () => import('@/pages/FoodsSearch/FoodsSearchIndex.vue'),
			meta: {
				title: '搜索菜谱',
				keepAlive: false,
				isLogin: false,
			},
		},
		{
			name: 'OrderIngredients',
			path: '/OrderIngredients',
			component: () => import('@/pages/OrderIngredients/OrderIngredientsIndex.vue'),
			meta: {
				title: '查看订单状态',
				keepAlive: false,
				isLogin: false,
			},
		},
		// 用户界面
		{
			name: 'UserOrder',
			path: '/user/order',
			component: () => import('@/pages/UserOrder/UserOrderIndex.vue'),
			children: [
				{
					name: 'UserOrderList',
					path: '/user/order/list',
					alias: '/user/order',
					component: () => import('@/pages/UserOrder/components/UserOrderListIndex.vue'),
					meta: {
						title: '我的订单',
						keepAlive: false,
						isLogin: true,
					},
				},
			],
		},
		{
			name: 'UserInfo',
			path: '/user/info',
			component: () => import('@/pages/UserInfo/UserInfoIndex.vue'),
			meta: {
				title: '个人中心',
				keepAlive: false,
				isLogin: true,
			},
		},
		{
			name: 'UserDiet',
			path: '/user/diet',
			component: () => import('@/pages/UserDiet/UserDietIndex.vue'),
			meta: {
				title: '我的饮食爱好',
				keepAlive: false,
				isLogin: true,
			},
		},
		{
			name: 'UserShare',
			path: '/UserShareIndex',
			alias: '/user/share',
			component: () => import('@/pages/UserShare/UserShareIndex.vue'),
			children: [
				{
					name: 'UserShareList',
					path: '/user/share/list',
					alias: '/user/share',
					component: () => import('@/pages/UserShare/pages/UserShareList.vue'),
					meta: {
						title: '我的分享',
						keepAlive: false,
						isLogin: true,
					},
				},
				{
					name: 'UserShareAdd',
					path: '/UserShareAdd',
					alias: '/user/share/add',
					component: () => import('@/pages/UserShare/pages/UserShareAdd.vue'),
					meta: {
						title: '打卡分享',
						keepAlive: false,
						isLogin: true,
					},
				},
			],
		},
		{
			name: 'UserCollect',
			path: '/user/collect',
			component: () => import('@/pages/UserCollect/UserCollectIndex.vue'),
			meta: {
				title: '我的收藏',
				keepAlive: false,
				isLogin: true,
			},
		},
		{
			name: 'UserAddress',
			path: '/user/address',
			component: () => import('@/pages/UserAddressList/UserAddressIndex.vue'),
			children: [
				{
					name: 'UserAddressList',
					path: '/user/address/list',
					alias: '/user/address',
					component: () => import('@/pages/UserAddressList/pages/UserAddressList.vue'),
					meta: {
						title: '我的地址',
						keepAlive: false,
						isLogin: true,
					},
				},
				{
					name: 'UserAddressAdd',
					path: '/user/address/add',
					component: () => import('@/pages/UserAddressList/pages/UserAddressAdd.vue'),
					meta: {
						title: '添加地址',
						keepAlive: false,
						isLogin: true,
					},
				},
			],
			meta: {
				title: '送餐地址',
				keepAlive: false,
				isLogin: true,
			},
		},
		// 404
		{
			name: 'NotFound',
			path: '*',
			component: () => import('@/components/common/NotFound.vue'),
		},
	],
});

// 【路由守卫】 在路由跳转之前执行
router.beforeEach((to, from, next) => {
	if (to.meta.title) {
		document.title = to.meta.title + ' - 食饭';
	}

	// 判断是否为登录页，如果为登录页则记录下上一次的页面
	if (to.path == '/userLogin') {
		sessionStorage.setItem('loginPath', from.path);
	}

	// 判断是否登录 如果需要登录直接重定向到登录页面
	const isLogin = store.state.userInfo && store.state.isLogin;
	if (to.meta.isLogin) {
		if (!isLogin) {
			next({
				path: '/userLogin',
			});
		} else {
			// 如果用户已经登录，则放行
			next();
		}
	} else if (to.path == '/userLogin') {
		// 判断进入登录页面，如果已经登录，则直接跳转到首页
		if (isLogin) {
			next('/');
		} else {
			// 用户没有登录放行，使用户登录
			next();
		}
	} else {
		// 不需要登录 直接放行
		next();
	}
});

export default router;
